<template>
  <div class="detailLive">
    <video src="" controls="controls"></video>
    <div class="top-title">
      <div class="left">
        <p class="icon"></p>
        <p class="text">{{title}}</p>
      </div>
      <div class="right">
        <p class="prize">￥ {{prize}}</p>
      </div>
    </div>
    <div class="comment">
      <p class="title">{{ title}}</p>
      <p class="content">{{content}}</p>
    </div>
    <div class="flex">
      <div class="love-all" @click="love">
        <img class="love" v-if="loveTag=== 0" src="../../../assets/images/live/004.png">
        <img class="loved" v-else="loveTag===1" src="../../../assets/images/live/004-active.png">
        <p>{{loveNum}}</p>
      </div>
    </div>
    <div class="buy-btn" @click="trainBuy()">购买课程</div>
  </div>
</template>

<script>
  import {config, _isPhoneNumber} from '@/util/config'
  import axios from 'axios'

  export default {
    name: "detailLive",
    data() {
      return {
        username: '小米儿',
        active: 1,
        loveTag: 0,
        prize: 0,
        loveNum: 0,
        title: '',
        content: '',
        detailTitle: "",
        detailId: "",
        winHeight: "",
        posterSrc: "",
        videoSrc: "",
        isLove: 0,
        buyFlag: 1,
        isBuy: 1,
        playFlag: false,
      };
    },
    mounted() {
      this.getInfo('/api/trainlist/read', config.memberid);
    },
    methods: {
      trainBuy() {
        this.$router.push('/trainBuy');
      },
      love() {
        let id = this.$route.params.id;
        console.log(id);
        if (this.loveTag === 1) {
          this.loveNum--;
          this.loveTag = 0;
        }
        else {
          this.loveNum++;
          this.loveTag = 1;
        }
      },
      getInfo(url, memberid) {
        let id = this.$route.params.id;
        axios.post(url, {
          'id': id,
          'memberid': memberid,
        }).then((res) => {
            res = res.data.data;
            this.posterSrc = res.pic;
            this.videoSrc = res.videourl;
            this.buyFlag = res.isfree;
            this.prize = res.trainfee;
            this.title = res.title;
            this.content = res.content;
            this.isBuy = res.hassub;
            this.loveNum = res.collectnum;
            this.loveTag = res.hascol;
          }
        )
      },
    }
  }
</script>

<style scoped lang="less">
  .detailLive {
    video {
      width: 100%;
      height: 200px;
    }
    .top-title {
      height: 30px;
      font-size: 12px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 6px solid #f5f5f5;
      border-top: 6px solid #f5f5f5;
      .left {
        padding-left: 8px;
        display: flex;
        .icon {
          width: 4px;
          height: 18px;
          background: #ffac66;
        }
        .text {
          font-weight: 600;
          color: #000;
          margin-left: 6px;
        }
      }
      .right {
        padding-right: 8px;
        text-align: right;
        .prize {
          color: #000;
          font-weight: 600;
        }
      }
    }
    .comment {
      text-align: left;
      line-height: 150%;
      color: #343434;
      padding: 18px;
      .title {
        padding-bottom: 16px;
        text-align: center;
        font-weight: bold;
      }
      .content {
        text-indent: 24px;
        font-size: 14px;
      }
    }
    .flex {
      position: fixed;
      right: 10px;
      top: 60%;
      img {
        height: 40px;
        display: block;
      }
      p {
        font-size: 10px;
        color: gray;
        padding: 2px 0 4px 0;
      }
    }
    .buy-btn {
      width: 100%;
      position: fixed;
      height: 42px;
      line-height: 42px;
      text-align: center;
      background: #ffac66;
      color: #fff;
      font-size: 18px;
      bottom: 0;
      left: 0;
    }
  }
</style>
